<html>

<head>
	<title>
		3D methanol model using webGL and threeJS
	</title>
</head>

<body>
    <div id="container"></div>

	<!-- <script src="C:\Users\Boris\Dropbox\Public\study\js\threeJS\three.min.js" type="text/javascript"></script> -->
    <script src="../../three.min.js"></script>
    <script src="../../jquery-1.10.0.min.js"></script>


	<script>

		var SCREEN_WIDTH = window.innerWidth;
		var SCREEN_HEIGHT = window.innerHeight;

        var $container = $('#container');

		var camera, scene;
		var canvasRenderer, webglRenderer;

		var mesh, zmesh, geometry, pointLight, pmesh;

		var mouseX = 0, mouseY = 0;

		//var windowHalfX = window.innerWidth / 2;
		//var windowHalfY = window.innerHeight / 2;

		//var render_canvas = 1, render_gl = 1;
		//var has_gl = 0;

		//document.addEventListener( 'mousemove', onDocumentMouseMove, false );

		init();
        animate();

		function init() 
		{

			camera = new THREE.PerspectiveCamera(45, SCREEN_WIDTH / SCREEN_HEIGHT, 0.1, 100000);
			camera.position.z = 500;

			scene = new THREE.Scene();

			// LIGHTS			

			//var ambient = new THREE.AmbientLight(0xffffff);
			//scene.add( ambient );

            var directLight = new THREE.DirectionalLight(0xffffff);
            directLight.position.set(1,1,600).normalize();
            scene.add(directLight);
            
			//pointLight = new THREE.PointLight( 0xffffff );
			//pointLight.position.set( 0, 0, 300 );
			//scene.add( pointLight );
            

            /*

            var radius = 50,
                segments = 16,
                rings = 16;

            // create a new mesh with
            // sphere geometry - we will cover
            // the sphereMaterial next!
            var sphere = new THREE.Mesh(

              new THREE.SphereGeometry(radius, segments, rings),

              sphereMaterial);

            // add the sphere to the scene
            scene.add(sphere);

            var sphereMaterial =
              new THREE.MeshLambertMaterial(
                {
                  color: 0xCC0000
                });
            */

			// RENDERER
			try {

				webglRenderer = new THREE.WebGLRenderer();
				webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
				$container.append(webglRenderer.domElement);

			}
			catch (e) {
                console.log(e);
			}

		// STATS
		/*
		stats = new Stats();
		stats.domElement.style.position = 'absolute';
		stats.domElement.style.top = '0px';
		stats.domElement.style.zIndex = 100;
		container.appendChild( stats.domElement );
		*/

    		// LOADER
		
            var loader = new THREE.JSONLoader();
            loader.load("methanol.js", createScene);


		}

        function createScene(geometry, materials)
        {
            var material = new THREE.MeshFaceMaterial(materials);
            mesh = new THREE.Mesh(geometry, material);
            mesh.scale.set(20, 20, 20);
            var model = new THREE.Object3D();
            model.add(mesh);
            scene.add(model);
        }

		function animate()
		{
            requestAnimationFrame(animate);
            try
            {
                mesh.rotation.x += 0.01;
                mesh.rotation.y += 0.02;

                pointLight.position.z -= 1;
            }
            catch(e){}

            webglRenderer.render(scene, camera);
		}

	</script>

</body>

</html>
